<template>
    <div class="app-container">
        <el-row :gutter="15">
            <el-col :span="10">
                <el-row :gutter="10">
                    <el-table :data="userList" size="mini" :row-class-name="tableRowClassName"
                              style="width: 100%;border-radius: 16px;" height="400">
                        <el-table-column label="候考学生" align="center">
                            <template scope="scope">
                                <el-tag v-if="isView(scope.row)" effect="plain">
                                    {{ scope.row }}
                                </el-tag>
                                <el-tag v-else style="visibility:hidden"></el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="nameShow" label="学生姓名" align="center" width="90">
                            <template scope="scope">
                        <span v-if="isView(scope.row)">
                            {{ peopleMap[scope.row].userName }}
                        </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="评分表" align="center">
                            <template scope="scope">
                    <span v-if="isView(scope.row)">
                        {{ sheetMap[placeId + '-' + scope.row].name }}
                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="打分" align="center">
                            <template scope="scope">
                                <el-button v-if="isView(scope.row) && scope.$index == 0"
                                           @click="giveMark(scope.row)" size="medium" type="success"
                                           icon="el-icon-star-off" circle/>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row :gutter="10">
                    <el-table :data="examOvers" size="mini" style="width: 100%;border-radius: 16px;margin-top: 20px"
                              height="430">
                        <el-table-column label="已考学生" align="center" prop="code"/>
                        <el-table-column label="评分表" align="center">
                            <template scope="scope">
                                {{ sheetMap[placeId + '-' + scope.row.code].name }}
                            </template>
                        </el-table-column>
                        <el-table-column label="分数" align="center" prop="score">
                            <template scope="scope">
                                <el-button size="small" plain type="danger" @click="giveMark(scope.row.code)">
                                    {{ scope.row.score }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-col>
            <el-col :span="14" class="text_center">
                <el-row :gutter="10">
                    <el-card class="box-card right_user_info">
                        <el-empty v-if="isEmpty(exam.place)"/>
                        <el-row v-else :gutter="10">
                            <el-col :span="10">
                                <el-descriptions :column="1" style="top: 100px;margin-left: 20px">
                                    <template slot="title">
                                <span class="my-descriptions_title">
                                    {{ exam.place?.skillName }}
                                </span>
                                    </template>
                                    <el-descriptions-item label="场地">{{ exam.place?.placeName }}-{{ exam.index + 1 }}
                                    </el-descriptions-item>
                                    <!--                    <el-descriptions-item label="技能">{{ skill.name }}</el-descriptions-item>-->
                                    <!--                    <el-descriptions-item label="评分表">{{ sheetStr }}</el-descriptions-item>-->
                                    <el-descriptions-item label="必过技能" v-if="isNotEmptyStr(exam.mustSkill)">
                                        <el-tag v-for="skill in JSON.parse(exam.mustSkill)" style="margin-left: 3px">
                                            {{ skill }}
                                        </el-tag>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="评分表" :contentStyle="{'white-space':'pre-line'}"
                                                          v-if="isNotEmptyStr(exam.mustSkill)">
                                 <span v-if="isView(userList[0])">
                                    {{ sheetMap[placeId + '-' + userList[0]].name }}
                                 </span>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="题目" :contentStyle="{'white-space':'pre-line'}"
                                                          v-if="isNotEmptyStr(exam.mustSkill)">
                                 <span v-if="isView(userList[0])">
                                    {{ sheetMap[placeId + '-' + userList[0]].question }}
                                 </span>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-col>
                            <el-col :span="14">
                                <img v-if="isView(userList[0])" :style="isAndroidNotEmpty ? {width: '200px', height: '150px'} : {width: '300px', height: '250px'}" :src="sheetMap[placeId + '-' + userList[0]].imageUrl" alt="">
                            </el-col>
                        </el-row>
                    </el-card>
                </el-row>
                <el-row :gutter="10">
                        <div class="right_instruct">
                            <el-row :gutter="10" type="flex" justify="space-around">
                                <el-col :span="5" style="height: 100%;">
                                    <el-row :gutter="10">
                                        <el-button :class="'next_student_color next_student-call_code'+isAndroid" @click="nextStudent" style="margin-bottom: 10px"
                                                   round>下一位
                                        </el-button>
                                    </el-row>
                                    <el-row :gutter="10">
                                        <el-button :class="'call_code_color next_student-call_code'+isAndroid" @click="instruct('call_code')"
                                                   style="font-size: 27px;" round>
                                            <span style="margin-left: -8px">重复叫号</span>
                                        </el-button>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row :gutter="10">
                                        <div class="title_context text_center">倒计时控制</div>
                                    </el-row>
                                    <el-row :gutter="10" style="margin-top: 2%">
                                        <el-input placeholder="自定义倒计时(分)" v-model="count_down_num" size="mini">
                                            <el-select v-model="time_count_down_unit" slot="prepend" placeholder="单位" :style="{'width': isAndroidNotEmpty ? '5%' : '60%'}">
                                                <el-option label="秒" value="1"/>
                                                <el-option label="分" value="2"/>
                                                <el-option label="时" value="3"/>
                                            </el-select>
                                            <template slot="append">
                                                <el-button v-if="isAndroidNotEmpty" slot="append" @click="countDownResetNum" icon="el-icon-check" style="margin: 0;padding: 0"/>
                                                <el-button v-else slot="append" @click="countDownResetNum">确认</el-button>
                                            </template>
                                        </el-input>
                                    </el-row>
                                    <el-row v-if="isAndroidNotEmpty" :gutter="10" style="margin-top: 3%">
                                        <el-col :span="8">
                                            <el-button type="primary" icon="el-icon-video-play" @click="instruct('instruct@count_down_start')" plain circle size="small"/>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-button type="danger" icon="el-icon-video-pause" @click="instruct('instruct@count_down_pause')" plain circle size="small"/>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-button type="info" icon="el-icon-refresh" @click="instruct('instruct@count_down_reset')" plain circle size="small"/>
                                        </el-col>
                                    </el-row>
                                    <el-row v-else :gutter="10" style="margin-top: 3%">
                                        <el-col :span="8">
                                            <el-button type="primary" icon="el-icon-video-play" @click="instruct('instruct@count_down_start')" plain round size="small">开始</el-button>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-button type="danger" icon="el-icon-video-pause" @click="instruct('instruct@count_down_pause')" plain round size="small">暂停</el-button>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-button type="info" icon="el-icon-refresh" @click="instruct('instruct@count_down_reset')" plain round size="small">重置</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="3">
                                    <el-button :class="'switch_time'+isAndroid" @click="instruct('instruct@countDown_or_timekeeping')" round>
                                        <span>切换</span><br>
                                        <span>计时</span><br>
                                        <span>方式</span><br>
                                    </el-button>
                                </el-col>
                                <el-col :span="3">
                                    <el-row :gutter="10">
                                        <el-col :span="10" class="title_context">
                                                计 <br> 时<br>器<br>控<br>制
                                        </el-col>
                                        <el-col v-if="isAndroidNotEmpty" :span="12">
                                            <el-button type="primary" icon="el-icon-video-play" @click="instruct('instruct@timekeeping_start')" plain circle size="small"/>
                                            <br>
                                            <el-button type="danger" icon="el-icon-video-pause" @click="instruct('instruct@timekeeping_pause')" plain circle size="small"/>
                                            <br>
                                            <el-button type="info" icon="el-icon-refresh" @click="instruct('instruct@timekeeping_reset')" plain circle size="small"/>
                                        </el-col>
                                        <el-col v-else :span="12">
                                            <el-row :gutter="10">
                                                <el-button type="primary" icon="el-icon-video-play" @click="instruct('instruct@timekeeping_start')" plain round size="small">开始</el-button>
                                            </el-row>
                                            <el-row :gutter="10" style="margin-top: 15px">
                                                <el-button type="danger" icon="el-icon-video-pause" @click="instruct('instruct@timekeeping_pause')" plain round size="small">暂停</el-button>
                                            </el-row>
                                            <el-row :gutter="10" style="margin-top: 15px">
                                                <el-button type="info" icon="el-icon-refresh" @click="instruct('instruct@timekeeping_reset')" plain round size="small">重置</el-button>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                </el-row>
            </el-col>
        </el-row>
        <!-- 评分表对话框 -->
        <el-drawer :title="title" :visible.sync="mark_open" size="70%" :destroy-on-close="true" append-to-body>
            <MARK ref="mark" :code="code" :sessionId="sessionId" :sheet="sheet" @instruct="instruct"/>
        </el-drawer>
    </div>
</template>

<script>
import {isEmpty, isNotEmptyStr} from "@/utils/zzDouUtils/objUtil";
import MARK from './mark.vue';
import {sleep} from "@/utils/zzDouUtils/dateUtil";

export default {
    name: "place_in_view",
    components: {MARK},
    data() {
        return {
            isAndroid: '',
            exam: {
                place: {},
            },
            examinerType: null,//当前考官类型
            placeId: null,
            skill: {},
            sheetStr: {},
            sheet: {},
            sessionId: null,
            userList: null,
            peopleMap: {},
            examOvers: [],
            sheetMap: {},
            nameShow: false,
            count_down_num: null,
            time_count_down_unit: '1',
            code: null,
            mark_open: false,
            title: null,
        };
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.resizePage();
            })();
        };
    },
    created() {
        this.resizePage();
    },
    computed:{
        isAndroidNotEmpty(value){
            let this_ = this;
            return isNotEmptyStr(this_.isAndroid)
        }
    },
    watch: {},
    methods: {
        resizePage(){
            let de = document.documentElement;
            let width = de.clientWidth;
            let height = de.clientHeight;
            if (width < 1900 || height < 1000){
                this.$set(this,'isAndroid','_Android')
            }else {
                this.$set(this,'isAndroid','')
            }
        },
        isView(code) {
            const a = this.peopleMap[code];
            return a != null && a.view;
        },
        isNotEmptyStr,
        isEmpty,
        nextStudent() {
            this.$modal.confirm('是否确认切换下一位学生').then(() => {
                this.score = null;
                this.instruct('next_student', {code: this.userList[0]});
            }).catch(() => {
            });
        },
        //更新时间
        countDownResetNum() {
            if (isEmpty(this.count_down_num) && !isNaN(this.count_down_num)) {
                this.$modal.msgError("请输入正确的数字");
                return;
            }
            if (isEmpty(this.time_count_down_unit)) {
                this.$modal.msgError("请选择单位");
                return;
            }
            let value = 0;
            if (this.time_count_down_unit == '1') {//秒
                value = this.count_down_num;
            } else if (this.time_count_down_unit == '2') {//分
                value = this.count_down_num * 60;
            } else {//时
                value = this.count_down_num * 60 * 60;
            }
            this.instruct('instruct@count_down_reset_num_' + value);
            this.count_down_num = null;
        },
        instruct(order, obj) {
            this.$emit("instruct", order, obj);
        },
        /** 学生列表第一列颜色 */
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 0) {
                return 'warning-row';
            }
            return '';
        },
        /** 打分 */
        async giveMark(code) {
            await this.$emit("instruct", 'select_sheet', {code: code});
            const loading = this.$loading({lock: true, text: '正在查询评分表'});
            //休眠
            await sleep(600).then(() => {
                loading.close();
                this.title = `评分-${code}`;
                this.code = code;
                this.mark_open = true;
            })
        }
    },
};
</script>
<style scoped>
:deep .el-table .warning-row {
    background: oldlace;
}

.right_user_info {
    margin-top: 10%;
    padding-top: 20px;
    width: 100%;
    height: 330px;
    border-radius: 20px;
    /*background: linear-gradient(to left, #2CD5FF, #2CD5FF) left top no-repeat,*/
    /*linear-gradient(to bottom, #2CD5FF, #2CD5FF) left top no-repeat,*/
    /*linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat,*/
    /*linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat,*/
    /*linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat,*/
    /*linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat,*/
    /*linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat,*/
    /*linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat;*/
    /*background-size: 4px 100px, 100px 4px, 4px 100px, 100px 4px;*/
    /*position: relative;*/
}

.right_instruct {
    height: 100%;
    margin-top: 20px;
}


/*下一位*/
.next_student-call_code{
    width: 100%;
    height: 65px;
    font-size: 100% !important;
}
.next_student-call_code_Android{
    width: 100%;
    height: 50%;
    font-size: 100% !important;
}
.next_student_color {
    border-left: solid 1px yellow;
    border-right: solid 1px yellow;
}
.call_code_color {
    border-left: solid 1px green;
    border-right: solid 1px green;
}


.title_context {
    color: silver;
    font-size: 90%;
}

.switch_time {
    width: 60%;
    height: 130px;
    font-size: 150%;
    padding: 0;
    border-left: solid 1px #f8ac59;
    border-right: solid 1px #f8ac59;
}
.switch_time_Android{
    width: 80%;
    height: 90%;
    font-size: 100%;
    padding: 0;
    border-left: solid 1px #f8ac59;
    border-right: solid 1px #f8ac59;
}


.text_center {
    text-align: center;
}
</style>
